<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>面向对象封装消息提示</title>
    <style>
      .modal {
        width: 300px;
        min-height: 100px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        border-radius: 4px;
        position: fixed;
        z-index: 999;
        left: 50%;
        top: 50%;
        transform: translate3d(-50%, -50%, 0);
        background-color: #fff;
      }

      .modal .header {
        line-height: 40px;
        padding: 0 10px;
        position: relative;
        font-size: 20px;
      }

      .modal .header i {
        font-style: normal;
        color: #999;
        position: absolute;
        right: 15px;
        top: -2px;
        cursor: pointer;
      }

      .modal .body {
        text-align: center;
        padding: 10px;
      }

      .modal .footer {
        display: flex;
        justify-content: flex-end;
        padding: 10px;
      }

      .modal .footer a {
        padding: 3px 8px;
        background: #ccc;
        text-decoration: none;
        color: #fff;
        border-radius: 2px;
        margin-right: 10px;
        font-size: 14px;
      }

      .modal .footer a.submit {
        background-color: #369;
      }
    </style>
  </head>

  <body>
    <button id="delete">删除</button>
    <button id="login">登录</button>

    <!-- <div class="modal">
    <div class="header">温馨提示 <i>x</i></div>
    <div class="body">您没有删除权限操作</div>
  </div> -->

    <script>
      const delBtn = document.querySelector('#delete')
      const loginBtn = document.querySelector('#login')

      //准备一个构造函数
      function Modal(title, message) {
        //给实例化对象 设置盒子的属性
        this.modal = document.createElement('div')
        this.title = title
        this.message = message

        this.modal.className = 'modal'

        this.modal.innerHTML = `
        <div class="header">${this.title} <i>x</i></div>
        <div class="body">${this.message}</div>`
      }

      //把open方法挂载到原型对象上
      Modal.prototype.open = function () {
        //判断页面中是否已存在弹窗
        if (document.querySelector('.modal')) return alert('请先关闭现有弹窗！')

        document.body.appendChild(this.modal)

        this.modal.querySelector('i').addEventListener('click', () => {
          this.close()
        })
      }

      Modal.prototype.close = function () {
        this.modal.remove()
      }

      //绑定点击事件
      delBtn.addEventListener('click', function () {
        //先new一个实例化对象
        const modal = new Modal('温馨提示', '您没有权限删除')

        // console.log(modal)

        modal.open()
      })

      loginBtn.addEventListener('click', function () {
        //先new一个实例化对象
        const modal = new Modal('警告！！！', '你不配登录！！！')

        // console.log(modal)
        modal.open()
      })
    </script>
  </body>
</html>
